import { computed, defineComponent, onMounted, onUnmounted, reactive, Ref, ref, toRaw } from 'vue';
import { Popup } from 'vant';
import BHeader from './bottomHeader';
import { usePrepareStore } from '@/domain/correction/hooks/prepare';
import { AnswersTestID } from '@/domain/correction/types';
import { useCurrectStdStore } from '@/domain/correction/hooks/currectStd';
declare global {
  interface Window {
    katex: any;
  }
}
export default defineComponent({
  name: 'answers',
  setup() {
    const show = ref(true);
    const store = usePrepareStore();
    const currectStdStore = useCurrectStdStore();
    const ele = ref(null);
    const answers = computed(() => store.state.prepare?.answers);
    const getSubjectFilter = computed(() => (test_id: AnswersTestID) => currectStdStore.state.currentSubjectList.filter((n) => n.test_id === test_id));

    return () => (
      <Popup position="bottom" show={show.value} style={{ height: '70%' }}>
        <div class={'relative w-full h-r40 overflow-y-scroll text-r1.5 p-4 font-regular'} ref={ele}>
          {answers.value?.map((node) => {
            return (
              <div>
                {node.tests
                  .filter((val) => val.test_id === currectStdStore.state.currentSubject?.test_id)
                  .map((val) => {
                    return (
                      <div>
                        <h5 class={' mt-3 mb-3 font-bold pb-2 text-r1.4'}>
                          题目：
                          {(() => {
                            const l = getSubjectFilter.value(val.test_id);
                            if (l.length > 0) {
                              return <>{l[0].name}</>;
                            } else {
                              return null;
                            }
                          })()}
                        </h5>
                        <p class={'mt-3 flex'}>
                          <span class={'bg-blue-450 flex-none  leading-r3 rounded-md w-r3.6 h-r2.6 text-white text-center mr-2 text-r1.25'}>答案</span>
                          <span
                            class={'flex-1  text-r1.25'}
                            ref={(r: HTMLDivElement | any) => {
                              if (r) {
                                const reg = /[\u2E80-\u9FFF]|<(.*)>.*|<(.*)\/>/;
                                r.innerHTML = val.answer
                                  .map((ans) =>
                                    ans
                                      .split('$$')
                                      .map((str) => {
                                        if (!str.match(reg)) {
                                          return window.katex.renderToString(str, { throwOnError: false }) || str;
                                        }
                                        return str;
                                      })
                                      .join('')
                                  )
                                  .join(',');
                              }
                            }}
                          ></span>
                        </p>
                        <p class={'mt-3 flex'}>
                          <span class={'bg-blue-450 flex-none  leading-r3 rounded-md w-r3.6 h-r2.6 text-white text-center mr-2 text-r1.25'}>解析</span>
                          <span
                            class={'flex-1 text-r1.25'}
                            ref={(r: HTMLDivElement | any) => {
                              if (r) {
                                const reg = /[\u2E80-\u9FFF]|<(.*)>.*|<(.*)\/>/;
                                r.innerHTML = val.analytic
                                  .split('$$')
                                  .map((str) => {
                                    if (!str.match(reg)) {
                                      return window.katex.renderToString(str, { throwOnError: false }) || str;
                                    }
                                    return str;
                                  })
                                  .join('');
                              }
                            }}
                          ></span>
                        </p>
                        <p class={'mt-3 flex'}>
                          <span class={'bg-blue-450 flex-none w-r6 leading-r3 rounded-md  h-r2.6 text-white text-center mr-2 text-r1.25'}>评分标准</span>
                          <span
                            class={'flex-1 text-r1.25'}
                            ref={(r: any) => {
                              if (r) {
                                const reg = /[\u2E80-\u9FFF]|<(.*)>.*|<(.*)\/>/;
                                r.innerHTML = val.explanation
                                  .split('$$')
                                  .map((str) => {
                                    if (!str.match(reg)) {
                                      return window.katex.renderToString(str, { throwOnError: false }) || str;
                                    }
                                    return str;
                                  })
                                  .join('');
                              }
                            }}
                          ></span>
                        </p>
                      </div>
                    );
                  })}
              </div>
            );
          })}
        </div>

        <BHeader
          name={'答案'}
          cannel={() => {
            show.value = false;
            return true;
          }}
          okShow={false}
        ></BHeader>
      </Popup>
    );
  }
});
